<template>
  <view class="wrap">
    <view class="country">
      <span>国家/地区</span><span>+86></span>
    </view>
    <view class="phone">
      <input type="number" placeholder="请输入手机号" v-model="username" @blur="getMiniCode">
    </view>
    <view class="code">
      <input type="number" placeholder="请输入短信验证码" v-model="code" style="width: 300rpx;">
      <button @click="getCode" :disabled="isUse">｜获取验证码</button>
    </view>
    <!-- 隐私政策 -->
    <view class="privacy-policy">
      <view class="switch">
        <!-- <u-switch v-model="IsRead" @change="IsReadChange" size="14" active-color="black"></u-switch> -->
        <radio-group @change="IsReadChange">
          <label>
            <radio :checked="IsRead" color="black" style="transform:scale(0.7)" />
          </label>
        </radio-group>
      </view>
      <view class="text">
        <span @click="userService">《用户服务协议》</span>与<span @click="privacy">《隐私协议》</span>
      </view>
    </view>
    <!-- 登录按钮 -->
    <view class="login" @click="loginUser">

      登录/注册

    </view>

  </view>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        username: '',
        mold: '2',
        code: '',
        isUse: false,
        jsCodee: '',
        IsRead: false
      };
    },
    methods: {
      IsReadChange(e) {
        this.IsRead = true
      },
      getMiniCode() {
        let that = this
        uni.login({
          success(res) {
            that.jsCodee = res.code
          }
        })
      },
      // 1. 使用 mapMutations 辅助方法，把 m_user 模块中的 updateToken 方法映射到当前组件中使用
      ...mapMutations('m_user', ['updateUserInfo', 'updateToken', 'updateOpenId']),
      //获取验证码
      async getCode() {
        if (this.username.length < 11) return uni.$showMsg('请输入正确格式手机号')
        let data = {
          username: this.username
        }
        let res = await uni.$http.post('/blockette/login/testgetcode', data)
        this.isUse = true
        setTimeout(() => {
          this.isUse = false
        }, 60000)

      },
      // 登录
      async loginUser() {
        if (!this.IsRead) return uni.$showMsg('请阅读及勾选用户服务协议')
        let loginData = {
          username: this.username,
          mold: this.mold,
          code: this.code,
          jsCode: this.jsCodee
        }
        let res = await uni.$http.post('/blockette/login/enroll', loginData)
        if (res.data.code !== 200) return uni.$showMsg(res.data.msg)
        // 拿到openID
        this.updateOpenId(res.data.openid)
        // 把token存到vuex中
        this.updateToken(res.data.token)
        uni.switchTab({
          url: '/pages/my/my'
        })
      },
      userService() {
        uni.navigateTo({
          url: '/subpkg/serviceAgreement/serviceAgreement'
        })
      },
      privacy() {
        uni.navigateTo({
          url: '/subpkg/privacyAgreement/privacyAgreement'
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }

  .privacy-policy {
    display: flex;
    align-items: center;
    margin-left: -6px !important;

    .text {
      font-size: 12px;
      margin: 0 !important;
    }
  }

  .wrap {

    view {
      margin-left: 5%;
      // border-bottom: 0.5px solid #CED9E0;
    }

    .country {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 90%;
      margin: 20rpx 0 0 5%;
      height: 60px;
      line-height: 60px;
    }

    .phone {
      height: 60px;

      input {
        height: 100%;
        line-height: 60px;
      }
    }

    .code {
      height: 60px;
      display: flex;
      justify-content: space-evenly;
      align-content: center;

      input {
        height: 100%;
        line-height: 60px;
      }

      button {
        line-height: 60px;
        font-size: 15px;
        background: rgba(0, 0, 0, 0);
      }

      button::after {
        width: 0;
        border: none;
        visibility: hidden;
      }
    }

    .login {
      margin: 50rpx auto;
      width: 325px;
      height: 36px;
      line-height: 36px;
      background-color: #D5DDE5;
      color: white;
      border-radius: 10px;
      text-align: center;
    }
  }
</style>